import { Tabs } from "@arco-design/web-react";
import React from "react";
import { useCallback } from "react";
import { useState } from "react";
import Title from "./Title";
import { IconRight } from "@arco-design/web-react/icon";
const { TabPane } = Tabs;
const ApplicationCard = () => {
  const [activeTab, setActiveTab] = useState("1");
  const handleChange = useCallback((key) => {
    setActiveTab(key);
  }, []);
  const text = [
    "无论你是否有编程基础，都可以在扣子上快速搭建各类Bot，并发布到各类社交平台、通讯软件或部署到网站等其他渠道。",
    "豆包是你的多功能AI助手，为你的生活、学习、工作提供帮助，为你搜索信息，答疑解惑，分析总结，提供灵感，辅助创作。",
  ];
  const img = ["/app1.png", "/app2.png"];
  return (
    <div>
      <Title>豆包大模型应用</Title>
      <div className="flex justify-center">
        <Tabs onChange={handleChange} activeTab={activeTab}>
          <TabPane key="1" title="AI应用开发平台"></TabPane>
          <TabPane key="2" title="多功能AI助手"></TabPane>
        </Tabs>
      </div>
      <div className="flex justify-center py-8 text-gray-600">
        <div className="text-center w-72">{text[parseInt(activeTab) - 1]}</div>
      </div>
      <div className="text-center text-blue-700 text-lg">立即体验 <IconRight /></div>
      <div className="mt-8">
        <img src={img[parseInt(activeTab) - 1]} />
      </div>
    </div>
  );
};
export default ApplicationCard;
